// 导入 Ant Design 布局组件
import { Layout } from 'antd';
// 通过 解构赋值 将 Layout 内部的组件赋值给指定变量
const { Header, Content, Footer } = Layout;
// 导入 Ant Design 核心样式库
import 'antd/dist/antd.css';
// 导入与路由相关的组件
import { Routes, Route, useNavigate } from 'react-router-dom';

import './App.css';

// 导入自定义组件
import TopNavigator from './views/TopNavigator';
import ClassLoongAddView from './views/class/LoongAddView';
import ClassLoongListView from './views/class/LoongListView';

import BottomNavigator from './views/BottomNavigator';
import FunLoongAddView from './views/function/LoongAddView';
import FunLoongListView from './views/function/LoongListView';
import FunLoongEditView from './views/function/LoongEditView';

import Counter from './views/function/Counter';
import Mouse from './views/class/Mouse';
import Cat from './views/class/Cat';
import CoreSocialistValues from './views/class/CoreSocialistValues';

// 导入高阶组件
import wrap from './views/class/Wrapper';
// 导入被包裹的组件
import CommentList from './views/class/CommentList';
import BlogPost from './views/class/BlogPost';

import Article from './views/function/Article';
import Comments from './views/function/Comments';

function App() {

  // 借助于 useNavigate Hook 获得 navigate 函数
  const navigate = useNavigate();

  const WrappedCommentList = wrap( CommentList , ds => ds.getComments() );
  const WrappedBlogPost = wrap( BlogPost , (ds,props) => ds.getBlogPost( props.id ) );

  return (
    <Layout className="app">
      <Header className="header">
        {/* 顶部导航条 */}
        <TopNavigator />
      </Header>
      <Content className="content">
        {/* 声明路由(也是路由出口) */}
        <Routes>
          <Route path="/" element={ <p>首页</p>} />
          <Route path="/class/add" element={ <ClassLoongAddView navigate={ navigate } /> } />
          <Route path="/class/list" element={ <ClassLoongListView /> } />
          <Route path="/function/add" element={ <FunLoongAddView /> } />
          <Route path="/function/list" element={ <FunLoongListView /> } />
          <Route path="/function/edit/:id" element={ <FunLoongEditView /> } />
          <Route path="/counter" element={ <Counter /> }/>
          <Route path="/render-props" 
                 element={ <Mouse render={ state => <Cat mouse={state}/> } /> }/>
          <Route path="/core-socialist-values" 
                 element={ <Mouse render={ state => <CoreSocialistValues mouse={state}/> } /> }/>
          <Route path="/higher-order-components" 
                 element={ 
                  <>
                    <WrappedCommentList />
                    <WrappedBlogPost id={1234}/>
                    <WrappedBlogPost id={5678}/>
                  </> 
                 }/>
          <Route path="/custom-hook" 
                 element={ 
                   <>
                    <Article id={1234} />
                    <Comments />
                   </>
                 }/>
        </Routes>
      </Content>
      <Footer className="footer">
        {/* 底部导航条 */}
        <BottomNavigator />
      </Footer>
    </Layout>
  )
}

export default App;
